<template>
  <div class="help-layout">
    <el-card class="help-card">
      <template #header>
        <div>帮助文档</div>
      </template>
      <el-button @click="showHelpDoc">查看帮助文档</el-button>
      <div class="help-content">
        <h3>基本使用说明</h3>
        <p>本软件是FFmpeg的图形界面封装，提供了视频转换、分割、合并等功能。</p>
        <h4>转换功能</h4>
        <p>支持单文件转换和批量转换，可以选择不同的编码和参数。</p>
        <h4>分割功能</h4>
        <p>支持按时长和大小分割视频文件。</p>
        <h4>合并功能</h4>
        <p>支持多种方式合并视频文件。</p>
      </div>
    </el-card>

    <el-card class="about-card">
      <template #header>
        <div>关于</div>
      </template>
      <div class="about-content">
        <p>当前版本: 1.0.0</p>
        <p>基于FFmpeg构建</p>
        <el-button @click="showDonate">打赏作者</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { ref } from 'vue';
import { ElMessageBox } from 'element-plus';

export default {
  name: "HelpTab",
  setup() {
    const showHelpDoc = () => {
      ElMessageBox.alert(
        '详细的帮助文档请访问项目主页或查看随软件附带的帮助文件。',
        '帮助文档',
        {
          confirmButtonText: '确定'
        }
      );
    };

    const showDonate = () => {
      ElMessageBox.alert(
        '感谢您的支持！如果您觉得这个软件对您有帮助，可以考虑给作者打赏。',
        '打赏作者',
        {
          confirmButtonText: '确定'
        }
      );
    };

    return {
      showHelpDoc,
      showDonate
    };
  }
};
</script>

<style scoped>
.help-layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 15px;
}

.help-card, .about-card {
  width: 100%;
}

.help-content, .about-content {
  margin-top: 15px;
}

.help-content h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 18px;
}

.help-content h4 {
  margin-top: 15px;
  margin-bottom: 5px;
  font-size: 16px;
}

.help-content p {
  margin: 5px 0;
  line-height: 1.5;
}

.about-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.about-content p {
  margin: 5px 0;
}
</style>